import React from 'react';
import { useTranslation } from 'react-i18next';

/**
 * 确认弹窗组件接口定义
 * @interface ConfirmModalProps
 * @property {boolean} isOpen - 控制弹窗是否显示
 * @property {() => void} onClose - 关闭弹窗的回调函数
 * @property {() => void} onConfirm - 确认操作的回调函数
 * @property {string} title - 弹窗标题
 * @property {string} message - 弹窗消息内容
 * @property {string} [confirmText] - 确认按钮文本，可选，默认使用国际化的"确认"
 * @property {string} [cancelText] - 取消按钮文本，可选，默认使用国际化的"取消"
 */
interface ConfirmModalProps {
  isOpen: boolean;
  onClose: () => void;
  onConfirm: () => void;
  title: string;
  message: string;
  confirmText?: string;
  cancelText?: string;
}

/**
 * 确认弹窗组件
 * 
 * 这是一个通用的确认弹窗组件，用于各种需要用户确认的操作，如删除、重置等。
 * 特点：
 * 1. 支持自定义标题和消息内容
 * 2. 支持自定义确认和取消按钮文本
 * 3. 点击背景蒙版可关闭弹窗
 * 4. 响应式设计，适配移动端和桌面端
 * 5. 主题风格与应用保持一致
 * 
 * 使用示例：
 * ```jsx
 * <ConfirmModal
 *   isOpen={isModalOpen}
 *   onClose={() => setIsModalOpen(false)}
 *   onConfirm={handleConfirm}
 *   title="删除确认"
 *   message="确定要删除这个项目吗？此操作无法撤销。"
 *   confirmText="删除"
 *   cancelText="取消"
 * />
 * ```
 */
const ConfirmModal: React.FC<ConfirmModalProps> = ({
  isOpen,
  onClose,
  onConfirm,
  title,
  message,
  confirmText,
  cancelText
}) => {
  const { t } = useTranslation();
  // 如果弹窗未打开，不渲染任何内容
  if (!isOpen) return null;

  // 阻止点击事件冒泡，防止点击弹窗内容时关闭弹窗
  const stopPropagation = (e: React.MouseEvent) => {
    e.stopPropagation();
  };

  return (
    <div 
      className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
      onClick={onClose} // 点击背景关闭弹窗
      aria-modal="true"
      role="dialog"
    >
      <div 
        className="bg-[rgb(26,26,26)] rounded-lg p-6 max-w-md w-full mx-4 border border-[rgb(54,54,54)]"
        onClick={stopPropagation} // 防止点击内容区域时关闭弹窗
      >
        {/* 弹窗标题 */}
        <h3 className="text-xl text-white font-medium mb-3">{title}</h3>
        
        {/* 弹窗消息内容 */}
        <p className="text-gray-300 mb-6">{message}</p>
        
        {/* 按钮区域 */}
        <div className="flex justify-end space-x-3">
          {/* 取消按钮 */}
          <button
            className="px-4 py-2 bg-gray-700 text-white rounded-lg hover:bg-gray-600 transition-colors"
            onClick={onClose}
          >
            {cancelText || t('common.cancel')}
          </button>
          
          {/* 确认按钮 */}
          <button
            className="px-4 py-2 bg-pink-600 text-white rounded-lg hover:bg-pink-500 transition-colors"
            onClick={() => {
              onConfirm();
              onClose();
            }}
          >
            {confirmText || t('common.confirm')}
          </button>
        </div>
      </div>
    </div>
  );
};

export default ConfirmModal; 